<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title">查看详情</div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
      >
        <el-descriptions :column="2" border>
          <el-descriptions-item label="设备编号">
            {{ baTable.form.extend!.info.ecode }}
          </el-descriptions-item>
          <el-descriptions-item label="设备id">
            {{ baTable.form.extend!.info.eid }}
          </el-descriptions-item>
          <el-descriptions-item label="所属区域">
            {{ baTable.form.extend!.info.rname }}
          </el-descriptions-item>
          <el-descriptions-item label="所属企业">
            {{ baTable.form.extend!.info.cname }}
          </el-descriptions-item>
          <el-descriptions-item label="事件名称">
            {{ baTable.form.extend!.info.event }}
          </el-descriptions-item>
          <el-descriptions-item label="事件值">
            {{ baTable.form.extend!.info.eventValue }}
          </el-descriptions-item>
          <el-descriptions-item label="事件时间">
            {{ baTable.form.extend!.info.eventTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm } from "element-plus";

const baTable = inject("baTable") as baTableClass;
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}

.table-el-tree {
  :deep(.el-tree-node) {
    white-space: unset;
  }

  :deep(.el-tree-node__content) {
    display: block;
    align-items: unset;
    height: unset;
  }
}
</style>
